<template>
  <div class="sales-leasing-panel">
    <div class="stat-item">
      <div class="info">
        <span class="label">总可租售面积(㎡)</span>
        <span class="value">{{ animatedTotalArea }}</span>
      </div>
    </div>
    <div class="stat-item">
      <div class="info">
        <span class="label">已售面积(㎡)</span>
        <span class="value sold">{{ animatedSoldArea }}</span>
      </div>
      <div class="progress-bar">
        <div class="progress sold-progress" :style="{ width: soldPercentage }"></div>
      </div>
    </div>
    <div class="stat-item">
      <div class="info">
        <span class="label">已租面积(㎡)</span>
        <span class="value leased">{{ animatedLeasedArea }}</span>
      </div>
      <div class="progress-bar">
        <div class="progress leased-progress" :style="{ width: leasedPercentage }"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, defineProps } from 'vue';
import { useCountUp } from '@/composables/useCountUp';

const props = defineProps({
  stats: {
    type: Object,
    required: true,
    default: () => ({ total_area: 0, sold_area: 0, leased_area: 0 }),
  },
});

const calculatePercentage = (value, total) => {
  if (!total || total === 0) return '0%';
  return `${((value / total) * 100).toFixed(1)}%`;
};

const soldPercentage = computed(() => calculatePercentage(props.stats.sold_area, props.stats.total_area));
const leasedPercentage = computed(() => calculatePercentage(props.stats.leased_area, props.stats.total_area));

const animatedTotalArea = useCountUp(() => props.stats.total_area || 0);
const animatedSoldArea = useCountUp(() => props.stats.sold_area || 0);
const animatedLeasedArea = useCountUp(() => props.stats.leased_area || 0);
</script>

<style scoped>
.sales-leasing-panel {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 100%;
}
.stat-item {
  margin: 5px 0;
}
.info {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 5px;
}
.label {
  font-size: 16px;
  color: #aed4ff;
}
.value {
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  font-family: 'Digital-7 Mono', sans-serif;
}
.value.sold { color: #ffc53d; }
.value.leased { color: #00e5ff; }

.progress-bar {
  width: 100%;
  height: 8px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
}
.progress {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s ease;
}
.sold-progress { background-color: #ffc53d; }
.leased-progress { background-color: #00e5ff; }
</style> 